<template>
    <div class="filmheader">
        <img @click="$router.go(-1)" class="back" src="@/assets/imgs/back.png" alt="">
        <div class="banner">
            <img @click="show_poster(film.poster)" :src="film.poster" alt="" />
        </div>
        <div class="info">
            <h1>{{ film.name }}</h1>
            <p>{{ film.category }}</p>
            <p>{{ film.premiereAt | format_date }}</p>
            <p>{{ film.nation }} | {{ film.runtime }}分钟</p>
            <p>{{ film.synopsis }}</p>
        </div>
        <mypreview ref="mypreview"></mypreview>
    </div>
</template>

<script>
import Mypreview from '@/components/Mypreview.vue'
export default {
    components: { Mypreview },
    methods: {
        show_poster(_path) {
            this.$refs.mypreview.show_preview(_path)
        }
    },
    props: {
        film: {
            type: Object | null,
            required: true
        }
    },
    filters: {
        format_date(_val) {
            if (_val) {
                // 1686873600+'000'-0
                let date = new Date(_val + '000' - 0)
                return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDay()}日`
            } else {
                return '暂无上映日期'
            }
        },
        runtime(_val) {
            if (_val) {
                // 1686873600+'000'-0
                let date = new Date(_val + '000' - 0)
                return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDay()}日`
            } else {
                return '暂无上映日期'
            }
        }
    },

}
</script>

<style lang="less" scoped>
@import "../../../assets/Less/common.less";

.filmheader {
    .back {
        width: 30px;
        height: 30px;
        .position(absolute, 10px, auto, 10px, auto)
    }

    .banner {
        .flex();
        height: 218px;
        overflow: hidden;

        img {
            width: 100%;
        }
    }

    .info {
        padding: 15px;

        h1 {
            font-weight: normal;
        }

        p {
            font-size: @normal_font_size;
            color: @gray_text_color;
            margin: 5px 0;
        }
    }
}
</style>